<template>
  <view class="echarts-wrap" style="height: 520rpx">
    <mpvue-echarts @onInit="lineInit1" canvasId="category1" ref="lineChart1" @sendImg="sendImg" />
    <image v-if="tempFilePath" :src="tempFilePath" class="imgCanvas"></image>
  </view>
</template>

<script>
import * as echarts from "../../../../echarts/echarts.min5.2.0.js";
import mpvueEcharts from "../../../../echarts/imageEcharts.vue";

let lineOptionA = {
  type: "category",
  animation: false,
  color: ["#066BFF"],

  grid: {
    // top: "20%",
    x: 60,
    x2: 15,
    y: 30,
    y2: 65,
  },
  calculable: false,
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC",
        },
        fontSize: 13, //调整坐标轴字体大小
      },
    },
  ],
  dataZoom: [
    {
      show: true,
      start: 0,
      end: 50,
    },
  ],

  yAxis: [
    {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#BBC7DC",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E4EDF8",
        },
      },
    },
  ],
  series: [
    {
      name: "月薪",
      type: "line",
      smooth: true,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(115, 202, 255, 0.20)",
              },
              {
                offset: 1,
                color: "rgba(6, 107, 255, 0.02)",
              },
            ],
            false
          ),
        },
      },
      symbol: "circle",
      symbolSize: 10, // 设置圆的大小
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#066BFF",
        },
        formatter: function (params) {
          if (params.value < 101) {
            return params.value;
          } else {
            return "¥" + params.value;
          }
        },
      },
      data: [],
      selected: false,
    },
  ],
  touchHandler: function (e) {
    console.log(columnChart.getCurrentDataIndex(e));
    var index = columnChart.getCurrentDataIndex(e);
    if (index !== -1) {
      var data = columnChart.getSeriesDataItem(index);
      console.log(data);
      wx.showToast({
        title: `点击了 ${data.name}, 数据值: ${data.data}`,
        icon: "none",
      });
    }
  },
};
export default {
  components: {
    mpvueEcharts,
  },
  props: {
    salaryRegionChart: {
      type: Object,
      default: () => {},
    },
    showRegion: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      lineOption1: { ...lineOptionA },
      tempFilePath: null,
    };
  },
  onReady() {
    // this.chartCreate();
  },
  methods: {
    sendImg(img) {
      this.tempFilePath = img;
    },
    chartCreate(val) {
      if (val && val.dataX) {
        this.lineOption1.xAxis[0].data = val.dataX;
        this.lineOption1.series[0].data = val.dataY;
        this.$refs.lineChart1.init();
      }
    },
    lineInit1(e) {
      let { width, height } = e;
      let canvas = this.$refs.lineChart1.canvas;
      echarts.setCanvasCreator(() => canvas);
      let lineChart1 = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(lineChart1);
      lineChart1.setOption(this.lineOption1);
      lineChart1.resize();
      let end = this.salaryRegionChart.dataX.length - 1;
      lineChart1.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: end,
        position: ["60%", "30%"],
      });
      this.$refs.lineChart1.setChart(lineChart1);
      let ctx = this.$refs.lineChart1.ctx;
      let cid = ctx.canvasId;

      return lineChart1;
    },
  },
  watch: {
    salaryRegionChart: {
      handler(val) {
        if (val && val.dataX) {
          setTimeout(() => {
            try {
              this.chartCreate(val);
            } catch (error) {
              console.log("月平均薪酬图表错误：", error);
            }
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.echarts-wrap {
  width: 100%;
  margin-top: 12rpx;
  z-index: 0;
  position: relative;
}
.imgCanvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>
